<template>
  <div>
    <el-table
      :data="allTaskData.content_data"
      style="width: 100%"
    >
      <el-table-column
        label="任务名称"
      >
        <template slot-scope="scope">
          <el-card :body-style="{ padding: '0px' }" style="height: 140px">
            <div class="master-header" style="padding: 10px">
              <el-avatar size="large" :src="circleUrl" @error="errorHandler"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-avatar>
              <el-tag style="margin: 5px; font-size: large">{{ scope.row.title }}</el-tag>
              <el-tag class="button" effect="plain">{{ scope.row.description }}</el-tag>
              <i class="el-icon-coin" style="color: #ffba00; font-size: large">{{ scope.row.bounty }}</i>
            </div>
            <div style="padding: 14px;">
              <span>{{ scope.row.content }}</span>
              <el-button class="button" round plain size="small" type="primary" @click="claimTheTask(scope.row.id)">领取任务</el-button>
              <div class="bottom clearfix">
                <i class="el-icon-timer" /><time class="time">截止日期：{{ scope.row.enddate }}</time>
              </div>
            </div>
          </el-card>
        </template>
      </el-table-column>
      <el-table-column
        label="发布者"
      >
        <template slot-scope="scope">
          <el-card :body-style="{ padding: '0px' }" style="height: 140px">
            <div class="master-header" style="padding: 10px">
              <el-avatar size="large" :src="circleUrl" @error="errorHandler"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-avatar>
              <span style="margin: 5px; font-size: large; color: #30B08F">{{ scope.row.nickname }}</span>
            </div>
            <div style="padding: 14px;">
              <span>{{ scope.row.userintro }}</span>
            </div>
          </el-card>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import taskApi from '@/api/tasks'
export default {
  name: 'TaskTable',
  data() {
    return {
      allTaskData: {
      }
    }
  },
  mounted() {
    this.getAllTasks()
  },
  methods: {
    handleAccept(index, row) {
      console.log(index, row)
    },
    getAllTasks() {
      const queryVo = {
        'page': 1,
        'search_value': '',
        'task_type_id': '0'
      }
      taskApi.getPushliedTasks(queryVo)
        .then(response => {
          this.allTaskData = response
        })
    },
    claimTheTask(task_id) {
      const queryVo = {
        'id': task_id,
        'email': '871201602@qq.com',
        'username': '202447454',
        'isLogin': true
      }
      taskApi.claimATask(queryVo)
        .then(response => {
          if (response.status === 4003) {
            this.$message({
              message: '不能领取自己发布的任务',
              type: 'warning'
            })
          } else {
            this.$message({
              message: '领取成功~',
              type: 'success'
            })
          }
        })
    }
  }
}
</script>

<style scoped>
.master-header{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.time {
  margin-left: 5px;
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  margin: 5px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
